<template>
	<view class="updateMyData">
		<view class="box disFlex scale-1px-bottom">
			<view class="word">用户头像</view>
			<image @tap="chooseImg" :src="user.headimgurl" mode=""></image>
		</view>
		<view class="box disFlex scale-1px-bottom">
			<view class="word">昵称</view>
			<input type="text" v-model="user.nickname" />
		</view>

		<view class="box disFlex scale-1px-bottom">
			<view class="word">绑定手机</view>
			<input type="text" :value="user.phone" disabled />
		</view>
		<view class="box disFlex scale-1px-bottom">
			<view class="word">性别</view>
			<view class="sex">
				<!-- <text @tap="changeSex(1)">
					<text class="iconfont icon-not_Selected-copy" v-if="user.sex !== 1"></text>
					<text class="iconfont icon-xuanzhong" style="color: #2291FF;" v-if="user.sex == 1"></text>
					<text style="padding-left: 6rpx;padding-right: 40rpx;">男生</text>
				</text>
				<text @tap="changeSex(2)">
					<text class="iconfont icon-not_Selected-copy" v-if="user.sex !== 2"></text>
					<text class="iconfont icon-xuanzhong" style="color: #2291FF;" v-if="user.sex == 2"></text>
					<text style="padding-left: 6rpx;">女生</text>
				</text> -->
				<radio-group @change="changeSex">
					 <label class="radio"><radio value="1" :checked="user.sex==1" />男</label>
					 <label class="radio"><radio value="2" :checked="user.sex==2"/>女</label>
				</radio-group>
			</view>
		</view>
		<view class="box disFlex scale-1px-bottom" @tap="choose">
			<view class="word">地区</view>
			<view class="cont next paddingRight15">{{user.city}}</view>
		</view>


		<picker mode="date" start="1970-01-01" @change="changeBirth">
			<view class="box disFlex scale-1px-bottom ">
				<view class="word">生日</view>
				<view class="cont next paddingRight15">{{user.birthday}}</view>
			</view>
		</picker>



		<view class="bottom">
			<view class="box" :disabled="disabled" @tap="save">保存</view>
		</view>


		<view class="bgs" v-if="popDateStatus">
			<view class="sexPop">
				<view class="disFlex title">
					<text class="cansel" @tap="closeDatePop()">取消</text>
					<text class="word">选择地址</text>
					<text class="sure" @tap="getDate()">确定</text>
				</view>
				<view class="citylist">
					<view @click="changesure(item.shortname,item.id,i)" v-for="(item,i) in citydata" :key="i" :class="i == activeIndex?'cityitem cityactive':'cityitem'">
						{{item.shortname}}
					</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	import getImgs from '@/api/qiniu.js'
	export default {
		data() {
			return {
				datas: '',
				popDateStatus: false,
				popBirthStatus: false,
				proIndex: 0,
				cityIndex: 0,
				list: [],
				disabled: false,
				user: '',
				citydata: '',
				activeIndex: -1,
				iseidt:true
			}
		},
		onLoad(option) {
			const user = JSON.parse(decodeURIComponent(option.user));
			this.user = user
			console.log(user)
		},
		methods: {
			query() {
				this.http('apicloud/MemberInfo/readprofile', 'post', {}).then(res => {
					if (res.status == 200) {
						this.datas = res.data.members;
					}
				})
			},
			queryCity() {
				this.http('apicloud/Address/get_provinces_list', 'post', {}, false).then(res => {
					if (res.status == 200) {
						this.list = res.data.province_list;
					}
				})
			},
			changeBirth(e) {
				this.user.birthday = e.detail.value;
			},
			closeDatePop() {
				this.popDateStatus = false;
			},
			choose() {
				this.popDateStatus = true;
				this.citydata = uni.getStorageSync('citydata')
			},
			getDate() {
				this.popDateStatus = false;
			},
			changeSex(e) {
				this.user.sex = e.detail.value;
			},
			changeCity(e) {
				if (!e.detail.value[0]) {
					this.proIndex = 0;
				} else {
					this.proIndex = e.detail.value[0];
				}

				if (!e.detail.value[1]) {
					this.cityIndex = 0;
				} else {
					this.cityIndex = e.detail.value[1];
				}

			},
			save() {

				// this.disabled = true;
				// uni.showLoading({mask:true});
				if (this.user.nickname == '') {
					this.iseidt=false
					return uni.showToast({
						title: '昵称不能为空',
						icon: 'none'
					})
				}else{
					this.iseidt=true
				}
				if (this.user.city_id == null) {
					this.iseidt=false
					return uni.showToast({
						title: '地区不能为空',
						icon: 'none'
					})
				}else{
					this.iseidt=true
				}
				if (this.user.birthday == null) {
					this.iseidt=false
					return uni.showToast({
						title: '生日不能为空',
						icon: 'none'
					})
				}else{
					this.iseidt=true
				}
				console.log(this.iseidt)
				if(this.iseidt){
					let token = uni.getStorageSync('userinfo').token
					let user_id = uni.getStorageSync('userinfo').id
					let data = {
						token:token,
						user_id:user_id,
						headimgurl:this.user.headimgurl,
						sex:this.user.sex,
						birthday:this.user.birthday,
						city_id:this.user.city_id,
						nickname:this.user.nickname
					}
					console.log(data)
					this.http('/api/user/save','post',data).then(res =>{
						if(res.sta==200){
							this.getnav(this.router('updateSuccess'))
						}
					})
				}
				
			},
			chooseImg() {
				let token = uni.getStorageSync('userinfo').token
				let user_id = uni.getStorageSync('userinfo').id
				uni.chooseImage({
					count: 1,
					success: res => {
						
						uni.uploadFile({
							url: 'https://admin.51zhandashi.com/api/common/upload_qiniu',
							filePath: res.tempFilePaths[0],
							name: 'upfile',
							formData:{
								token:token,
								user_id:user_id,
								filename:'upfile'
							},
							success: (e) => {
								let res=JSON.parse(e.data)
								if(res.sta==200){
									this.user.headimgurl=res.data.url
								}
							}

						});
					
					}
				})
			},
			changesure(v,id, i) {
				this.user.city_id = id;
				this.user.city=v;
				this.activeIndex = i;
			},
			getuserinfo() {
				this.http('/api/user/read', 'post', {
						user_id: this.userid,
						token: this.token
					}, false)
					.then((res) => {
						console.log(res)
						if (res.sta == 200) {
							this.headimgurl = res.data.headimgurl;
						}
					})
			},
		}
	}
</script>

<style lang="less">
	.citylist {
		display: flex;
		flex-wrap: wrap;

		.cityitem {
			width: 100rpx;
			height: 40rpx;
			font-size: 24rpx;
			line-height: 40rpx;
			background-color: #f1f1f1;
			border-radius: 10px;
			color: #666;
			text-align: center;
			margin: 8rpx;
		}

		.cityactive {
			background-color: #2291FF !important;
			color: #fff;
		}
	}

	.updateMyData {
		padding: 0 32rpx;
		padding-bottom: 120rpx;

		.box {
			padding: 32rpx 0;

			.word {
				color: #333;
				font-size: 32rpx;
			}

			image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
			}

			input {
				width: 60%;
				text-align: right;
			}

			.sex {
				display: flex;
				align-items: center;

				.iconfont {
					margin-top: 2px;
				}
			}

			.cont {
				color: #999;
				font-size: 30rpx;
			}

			textarea {
				flex: 1;
				height: 300rpx;
				padding-left: 60rpx;
				font-size: 32rpx;
				transform: translateY(-10rpx);
			}
		}

		.activeColor {
			color: #6894B9;
			position: relative;

			&::after {
				content: '';
				position: absolute;
				left: 0;
				bottom: -24rpx;
				z-index: 1;
				width: 100%;
				height: 8rpx;
				border-radius: 4px;
				background-color: rgba(104, 148, 185, 1);
			}
		}

		.bottom {
			margin-top: 80rpx;

			.box {
				width: 100%;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #2291FF;
				font-size: 36rpx;
				color: rgba(255, 255, 255, 1);
				border-radius: 5px;
			}
		}


		.bgs {
			background: rgba(0, 0, 0, .3);
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 999;

			.sexPop {
				position: absolute;
				bottom: 0;
				left: 0;
				z-index: 99;
				width: 100%;
				height: 424rpx;
				padding: 0 32rpx;
				background-color: #fff;

				.psex {
					display: flex;
					align-items: center;
					font-size: 32rpx;
					color: #999;
					justify-content: center;
				}

				.activeColor {
					color: #6894B9;
				}

				.title {
					padding: 24rpx 0;

					text {
						font-size: 36rpx;
					}

					.cansel {
						color: rgba(153, 153, 153, 1);
					}

					.word {
						font-weight: bold;
					}

					.sure {
						color: #6894B9;
					}
				}

				.timeBox {
					padding: 32rpx 0;

					.left {
						color: #333;
						font-size: 32rpx;
					}

					.right {
						.time {
							color: #333;
							font-size: 32rpx;
						}

						.iconfont {
							font-weight: bold;
							margin-left: 10rpx;
							font-size: 28rpx;
						}
					}
				}
			}
		}
	}
</style>
